<template>

    <div class="edit-page">
        <div class="header">
            <el-page-header @back="back" content="编辑用户 ">
            </el-page-header>
        </div>

        <div class="form flex unified-flex-align unified-flex-space-between">

            <div class="menu">

                <el-menu @select="clickMenu" default-active="/Home/user/edit/basic/data" class="el-menu-vertical-demo">

                    <el-submenu index="1">
                        <template slot="title">
                            <i class="el-icon-user-solid"></i>
                            <span>基本信息</span>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item index="/Home/user/edit/basic/data">用户资料</el-menu-item>
                            <el-menu-item index="/Home/user/edit/basic/avatar">用户头像</el-menu-item>
                        </el-menu-item-group>

                    </el-submenu>

                    <el-submenu index="2">
                        <template slot="title">
                            <i class="el-icon-menu"></i>
                            <span>第三方绑定</span>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item index="/Home/user/edit/bind/mobile">手机号</el-menu-item>
                            <el-menu-item index="/Home/user/edit/bind/wechat">微信</el-menu-item>
                            <el-menu-item index="/Home/user/edit/bind/email">邮箱</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>

                    <el-submenu index="3">
                        <template slot="title">
                            <i class="el-icon-menu"></i>
                            <span>安全中心</span>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item index="/Home/user/edit/safe/">登录方式</el-menu-item>
                            <el-menu-item index="/Home/user/edit/safe/login">登录密码</el-menu-item>
                            <el-menu-item index="/Home/user/edit/safe/payment">支付密码</el-menu-item>
                            <el-menu-item index="/Home/user/edit/safe/protect">密保问题</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>


                    <el-submenu index="4">
                        <template slot="title">
                            <i class="el-icon-location"></i>
                            <span>角色权限</span>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item index="/Home/user/edit/role">角色管理</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>

                    <el-submenu index="5">
                        <template slot="title">
                            <i class="el-icon-location"></i>
                            <span>行为记录</span>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item index="/Home/user/edit/action/login">登录日志</el-menu-item>
                            <el-menu-item index="/Home/user/edit/action/browse">浏览记录</el-menu-item>
                            <el-menu-item index="/Home/user/edit/action/order">订单记录</el-menu-item>
                            <el-menu-item index="/Home/user/edit/action/invite">邀请记录</el-menu-item>
                            <el-menu-item index="/Home/user/edit/action/welfare">活动记录</el-menu-item>
                            <el-menu-item index="/Home/user/edit/action/evaluate">订单评价</el-menu-item>
                            <el-menu-item index="/Home/user/edit/action/discuss">问大家</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                </el-menu>


            </div>
            <div class="router flex">


                <router-view>

                </router-view>

            </div>


        </div>



    </div>
</template>

<script>
    export default {
        data() {

            return {
                api: this.$api.user
            }

        },
        methods: {
            back() {
                this.$router.back()
            },
            clickMenu(index) {

                if (this.$route.fullPath != index) {
                    this.$router.replace(index)
                }

            }
        },
        created() {
            if(this.$route.query.id){
                this.$axios({
                    url: this.api,
                    method: "GET",
                    params: {
                        action: "data",
                        params: {
                            id: this.$route.query.id
                        }
                    }
                }).then(res => {
                    if (res.data.code == 0) {
                        this.$store.commit('setEditUser', res.data.data)
                    }
                })
            }else{
                this.$router.back()
                
                
            }
            
            
            
        },beforeRouteLeave(to,form,next) {
            this.$store.commit('clearEditUser')
            next()
        }
    }
</script>

<style scoped="scoped">
    .edit-page {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        background-color: #0081FF;
    }

    .page {
        width: 100%;
        height: 100%;
    }

    .header {
        height: 70px;
        background-color: #fff;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding-left: 15px;
        border-radius: 6px;
    }

    .form {
        flex: 1;
        overflow-y: auto;
        box-sizing: border-box;
        display: flex;
        background-color: red;
    }

    .menu {
        width: 240px;
        overflow-y: auto;
        background-color: #fff;
        background-color: #0081FF;
    }

    .router {
        flex: 1;
        background-color: #fff;
        height: 100%;
        overflow-y: auto;
        flex-direction: column
    }
</style>
